<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType, Ref } from 'vue'
import type { ConfigValueOption } from './types'

// props
const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean, Object] as PropType<any>,
    default: () => {}
  },
  type: {
    type: String as PropType<string>,
    required: true
  },
  options: {
    type: Array as PropType<ConfigValueOption[]>,
    default: undefined
  },
  disabled: {
    type: Boolean as PropType<boolean>,
    default: false
  }
})

const valueType = parseValueType(props.type)

function parseValueType(type: string): string {
  switch (type) {
    case 'java.lang.String':
      return 'string'
    case 'java.lang.Boolean':
      return 'boolean'
    case 'java.lang.Integer':
    case 'java.lang.Long':
      return 'number'
    default:
      return ''
  }
}
const emit = defineEmits<{
  (e: 'update:modelValue', model: any): void
}>()

const model: Ref<any> = ref(props.modelValue)

watch(model, (v, ov) => {
  emit('update:modelValue', v)
})
</script>

<template>
  <el-select
    v-if="options"
    v-model="model"
    :disabled="disabled"
    placeholder="请选择"
    style="width: 100%"
  >
    <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value" />
  </el-select>
  <el-input
    v-else-if="valueType == 'string'"
    v-model="model"
    :disabled="disabled"
    placeholder="请输入键值"
  ></el-input>
  <el-input
    v-else-if="valueType == 'number'"
    v-model="model"
    type="number"
    :disabled="disabled"
    placeholder="请输入键值"
  ></el-input>
  <el-select
    v-else-if="valueType == 'boolean'"
    v-model="model"
    :disabled="disabled"
    placeholder="请选择"
    style="width: 100%"
  >
    <el-option label="True" :value="true" />
    <el-option label="False" :value="false" />
  </el-select>
  <el-input
    v-else
    v-model="model"
    type="textarea"
    :disabled="disabled"
    placeholder="请输入键值"
  ></el-input>
</template>
